<template>
  <div>
    <!-- 第一行  -->
    <div class="btns">
      <!-- inline行内表单 -->
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-row>
          <el-col :span="18">
            <el-form-item>
              <el-select clearable v-model="form.online_status" placeholder="请选择设备状态">
                <el-option label="在线" :value="1"></el-option>
                <el-option label="离线" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select clearable v-model="form.bind_status" placeholder="请选择设备绑定状态">
                <el-option label="未绑定" value="0"></el-option>
                <el-option label="已绑定" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input clearable v-model="form.name" placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <el-form-item>
              <!-- 设置icon属性设置类名  用于设置图标 -->
              <el-button type="primary" icon="el-icon-search" @click="toSearch">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-form-item>
              <el-button type="primary" @click="toAdd">录入</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <!-- 第二行 -->
    <!-- 放表格 自行调整列宽-->
    <!-- prop:这一列字段对应的内容 -->
    <div class="table">
      <el-table :data="deviceData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="serial_number" label="编号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="online_status" label="设备状态" align="center">
          <template v-slot="scope">
            <div>
              <el-tag v-if="scope.row.online_status == 1" type="success">在线</el-tag>
              <el-tag v-else type="danger">离线</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="bind_status" label="绑定状态">
          <template v-slot="scope">
            <div>
              <el-tag v-if="scope.row.bind_status == 1" type="success">已绑定</el-tag>
              <el-tag v-else type="danger">未绑定</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <div>
              <el-link @click="toEdit(scope.row)" :underline="false" type="success">修改</el-link>
              <el-link @click="toDelete(scope.row.id)" :underline="false" type="warning">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer @close="reset" size="50%" :title="title" :visible.sync="visible" direction="rtl"
      custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content" style="padding-right: 10px;">
        <!-- {{ this.formSave }} -->
        <!-- 校验 -->
        <el-form :rules="rules" ref="myForm" :model="formSave">
          <el-row>
            <el-col>
              <el-form-item prop="serial_number" label="编号" :label-width="formLabelWidth">
                <el-input class="input" clearable placeholder="请输入编号" v-model="formSave.serial_number"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item prop="name" label="名称" :label-width="formLabelWidth">
                <el-input class="input" clearable placeholder="请输入名称" v-model="formSave.name"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="title == '修改工程信息'"> </el-col>

          </el-row>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSubmit">确定</el-button>
        </div>
      </div>

    </el-drawer>
  </div>
</template>
<script>
import { get, del, postJSON } from '@/utils/request'
export default {
  data() {
    return {
      // 提供表单数据对象 -->条件对象
      form: {},
      // 设备数据
      deviceData: [],
      params: {
        page: 1,
        pageSize: 10
      },
      title: '录入工程信息',
      // 控制抽屉显示与隐藏
      visible: false,
      formSave: {},
      formLabelWidth: '120px',
      rules: {
        serial_number: [
          { required: true, message: '请输入编号', trigger: "blur" },
        ],
        name: [
          { required: true, message: '请输入名称', trigger: "blur" },
        ]
      }
    }
  },
  methods: {
    reset() {
      this.$refs['myForm'].resetFields();

    },
    toSubmit() {
      this.$refs['myForm'].validate(async (valid) => {
        if (valid) {
          // 表单校验通过 发起保存或者更新请求
          // alert('submit!');
          let data = _.clone(this.formSave);
          delete data.deviceData;
          let res = await postJSON('/device/saveOrUpdate', data);
          if (res.status == 200) {
            this.$notify({
              title: "成功",
              message: res.message,
              type: 'success'
            });
            // 成功关闭抽屉
            this.visible = false;
            // 重新查询数据
            this.getDevData();
          }
        } else {
          // 表单校验失败
          // console.log('error submit!!');
          return false;
        }
      });

    },
    toEdit(row) {
      this.visible = true;
      this.title = '修改工程信息';
      // ...拓展运算符  展开当前行对象
      // this.formSave = { ...row };
      this.formSave = _.clone(row);
      console.log(this.formSave);
    },
    // 录入工程信息
    toAdd() {
      // 抽屉显示
      this.visible = true;
      // 修改标题
      this.title = "录入工程信息";
      // 清空表单数据对象
      this.formSave = {};
    },
    toDelete(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点了确定按钮 发起删除工程请求 
        let res = await del('/device/deleteById', { id });
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        // 若第二页数据删除应该返回第一页重新载入数据
        this.params.page = 1;
        // 重新载入数据
        this.getEngData();
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消操作'
        // });
      });

    },
    // 用来结束页面里的工程
    toFinish(id) {
      // console.log(id);
      this.$confirm('此操作将永久结束该工程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点了确定按钮 发起结束工程请求 
        let res = await get('/engineer/finish', { id });
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        // 重新载入数据
        this.getEngData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

    toSearch() {
      this.params.page = 1;
      this.getDevData();
    },
    // 分页多条件获取所有设备数据
    async getDevData() {
      let temp = {
        // 全部展开
        ...this.form,
        ...this.params
      };
      let res = await get('/device/pageQuery', temp);
      // console.log(res, '获取设备响应');
      this.deviceData = res.data.list;

    }
  },
  created() {
    this.getDevData();

    // 接下来提供接口路径和参数
  }
}
</script>
<style lang="scss" scoped>
// vue2深度选择器
::v-deep .el-link--inner {
  margin-left: 5px;
}

// 输入框
.input {
  width: 280px;
}

// 下拉框
.select {
  width: 280px;
}

.demo-drawer__footer {
  border-top: 1px solid #ececec;
  padding-top: 10px;
  position: fixed;
  bottom: 50px;
  width: 50%;
  text-align: center;
}
</style>
